<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>查询页面</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style media="screen">
        * {
            padding: 0;
            margin: 0;
        }

        header {
            height: 0rem;
            background-color: #3fd5a5;
        }

        footer {
            position: fixed;
            bottom: 0;
            height: 10%;
            width: 100%;
            border-top: 2px solid #ccc;
            display: -webkit-flex;
            -webkit-box-orient: horizontal;
            text-align: center;
            justify-content: space-around;
        }

        footer .menu {
            width: 50%;
            display: -webkit-flex;
            -webkit-flex-flow: column;
            justify-content: center;
            font-size: 1rem;
        }

        .menu .icon {
            height: 40%;
            width: 40%;
            margin: auto;
        }

        #farmer .icon #home {
            display: block;
            width: 40%;
            height: auto;
            margin: auto;
        }

        #farmer .icon #home_inactive {
            display: none;
            width: 40%;
            height: auto;
            margin: auto;
        }

        #user .icon {
            height: 35%;
            width: 35%;
            margin: auto;
        }

        #user .icon #user_inactive {
            display: block;
            width: 35%;
            height: auto;
            margin: auto;
        }

        #user .icon #user_icon {
            display: none;
            width: 35%;
            height: auto;
            margin: auto;
        }

        .touch-down {
            opacity: .4;
        }
    </style>
</head>

<body>
    <header></header>
    <footer>
        <section class="menu" id="farmer" tapmode="touch-down">
            <section class="icon">
                <img src="../icon/home.png" alt="" id="home" />
                <img src="../icon/home_inactive.png" alt="" id="home_inactive" />
            </section>
            <section class="title">
                首页
            </section>
        </section>
        <section class="menu" id="user" tapmode="touch-down">
            <section class="icon ">
                <img src="../icon/user_inactive.png" alt="" id="user_inactive" />
                <img src="../icon/user.png" alt="" id="user_icon" />
            </section>
            <section class="title">
                我的
            </section>
        </section>
    </footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/keyback.js"></script>
<script type="text/javascript">
    function initFront() {
        var header = $api.dom('header'); // 获取 header 标签元素
        var headerHeight = $api.fixStatusBar(header);
        var height = api.winHeight - headerHeight;
        var footer = $api.dom('footer');
        footer = $api.offset(footer);
        height -= footer.h;
        api.openFrameGroup({
            name: 'dashboard_win',
            scrollEnabled: false,
            rect: {
                x: 0,
                y: headerHeight,
                w: 'auto',
                h: height
            },
            frames: [{
                name: 'query_farmer',
                url: 'frame/dashboard/query_farmer.html',
                bgColor: '#fff'
            }, {
                name: 'user_frame',
                url: 'frame/dashboard/user_frame.html',
                bgColor: '#fff'
            }]
        }, function(ret, err) {});
    };

    function initEvent() {
        var farmer = $api.byId('farmer');
        var user = $api.byId('user');
        var userIcon = $api.dom(user, '.icon');
        $api.addEvt(farmer, 'touchend', function() {

            document.getElementById('home').style.display = 'block';

            document.getElementById('home_inactive').style.display = 'none';

            document.getElementById('user_inactive').style.display = "block";

            document.getElementById('user_icon').style.display = "none";

            api.setFrameGroupIndex({
                name: 'dashboard_win',
                scroll: true,
                index: 0
            });
        });
        $api.addEvt(user, 'touchend', function() {
            document.getElementById('home').style.display = 'none';

            document.getElementById('home_inactive').style.display = 'block';

            document.getElementById('user_inactive').style.display = "none";

            document.getElementById('user_icon').style.display = "block";
            api.setFrameGroupIndex({
                name: 'dashboard_win',
                scroll: true,
                index: 1
            });
        });
        keybackTwiceExit();
    }
    apiready = function() {
        initFront();
        initEvent();
    }
</script>

</html>
